<template>
	<view class="content">
		<view class="textTitle">
			{{title}}
		</view>

		<!-- 		<view class="textContent" style="">
			地块位于东新单元南部，西侧为东新园大型居住小区，居住氛围浓厚。周边有成熟的居住配套设施，医疗、教育、商业等各类生活配套一应俱全。同时地块距离在建地铁5号线香积寺站较近，未来交通出行也极为便利。
		</view>
		<view class="img">
			<image src="../../static/logo.png" mode="widthFix"></image>
		</view>
		<view class="img">
			<image src="../../static/logo.png" mode="widthFix"></image>
		</view>
		<view class="table">
			<uni-table ref="table" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th align="center">地块名称</uni-th>
					<uni-th align="center">规划用途</uni-th>
					<uni-th align="center">土地面积</uni-th>
					<uni-th align="center">容积率</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.dkmc }}</uni-td>
					<uni-td align="center">{{ item.ghyt }}</uni-td>
					<uni-td align="center">{{ item.tdmj }}</uni-td>
					<uni-td align="center">{{ item.rjl }}</uni-td>
				</uni-tr>
			</uni-table>
		</view> -->
		<view class="noData" v-show="!noDataShow">
			暂无数据
		</view>
		<view v-show="noDataShow">
			<!-- <hr style="margin-bottom: 15px;" /> -->
			<view class="bgImg">

			</view>
			<u-parse style="padding: 5px 5px;padding-top: 10px;" :content="content" :domain="domainUrl"></u-parse>
			<view class="img" v-for="(item,index) in imglist" :key="index">
				<image :src="item.url" mode="widthFix" @click="preview(item.url)"></image>
			</view>
			<q-previewImage ref="previewImage" :urls="imgs"></q-previewImage>
			<view class="tables">
				<table border cellpadding="5" cellspacing="0">
					<tr>
						<th colspan="2" style="">地块名称</th>
						<th>地块面积</th>
						<th>规划用途</th>
					</tr>
					<tr>
						<td colspan="2">{{tablData.name}}</td>
						<td>{{tablData.mianji}}</td>
						<td>{{tablData.ghyt}}</td>
					</tr>
					<tr>
						<th class="rjl">容积率</th>
						<th>建筑密度</th>
						<th>建筑限高</th>
						<th>绿地率</th>
					</tr>
					<tr>
						<td>{{tablData.rjl}}</td>
						<td>{{tablData.jzmd}}</td>
						<td>{{tablData.jzxg}}</td>
						<td>{{tablData.ldl}}</td>
					</tr>
				</table>
			</view>
		</view>
		<view class="goManual" @click="goToTab()">
			查看阅地手册
		</view>
		<!-- 		<uni-table ref="table" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
			<uni-tr>
				<uni-th align="center">地块名称</uni-th>
				<uni-th align="center">规划用途</uni-th>
				<uni-th align="center">土地面积</uni-th>
				<uni-th align="center">容积率</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td align="center">{{ item.dkmc }}</uni-td>
				<uni-td align="center">{{ item.ghyt }}</uni-td>
				<uni-td align="center">{{ item.tdmj }}</uni-td>
				<uni-td align="center">{{ item.rjl }}</uni-td>
			</uni-tr>
		</uni-table> -->
	</view>
</template>

<script>
	import {
		getData
	} from "@/api/manual.js"
	import config from "@/config.js"
	import {
		toast
	} from '@/utils/common'
	import {
		getRichTextData,
		imgList
	} from "@/api/land.js"
	export default {
		data() {
			return {
				tableData: [{
					dkmc: 'XC0606-R21-08地块',
					ghyt: '住宅',
					tdmj: '16.50',
					rjl: '2.2'
				}],
				content: "",
				title: "",
				domainUrl: '',
				objectId: '',
				imglist: [],
				noDataShow: true,
				tablData: [],
				ydscUrl: '',
				imgs: [], //imgs其实就是用来存放当前图片的数组，每次点击每次赋值就行
			}
		},
		onLoad(event) {
			this.domainUrl = config.imgUrl
			this.objectId = event.id
			this.tablData = this.$store.state.user.speckleData
			console.log(this.tablData)

			getRichTextData(event.id).then(res => {
				console.log(res)
				if (!res.data) {
					return this.noDataShow = false
				}

				this.content = res.data.xiangqing
				this.title = res.data.title
				this.ydscUrl = res.data.url

				imgList(res.data.id).then(res => {
					console.log(res, '图片')

					if (res.data.lenghr == 0) {
						return this.noDataShow = false
					}

					this.imglist = res.data.map((item, index) => {
						return {
							url: config.baseUrl + item.url
						}
					})
				})
			})

		},
		methods: {
			goToTab() {
				// const data = {
				// 	dkmc: this.objectId
				// }
				// getData(data).then(res => {
				// 	console.log(res)
				// 	console.log(config.baseUrl + res.rows[0]?.url)
				// 	if (!res.rows[0]?.url) return toast('此地块暂无阅地手册')
				// 	uni.navigateTo({
				// 		url: '/pages/manual/detitl?url=' + config.baseUrl + res.rows[0]?.url
				// 	})
				// })
				if (!this.ydscUrl) return toast('此地块暂无阅地手册')
				uni.navigateTo({
					url: '/pages/manual/detitl?url=' + config.baseUrl + this.ydscUrl + '&title=' + this.title
				})
			},
			preview(url) {
				this.imgs = [`${url}`]
				this.$refs.previewImage.open(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 15px;
		padding-top: 5px;
		padding-bottom: 50px;
		// background-color: #fff;
	}

	.textTitle {
		text-align: center;
		font-size: 20px;
		font-weight: 500;
		margin: 15px 0;
	}

	.textContent {
		margin-top: 5px;
		text-indent: 2rem;
	}

	.img {
		margin-top: 5px;

		image {
			width: 100%;
		}
	}

	.table {
		margin-top: 5px;
	}

	.noData {
		text-align: center;
	}

	.goManual {
		// display: inline-block;
		font-weight: 600;
		color: #fff8f8;
		// margin-top: 15px;
		// text-decoration: underline;
		padding: 10px 20px;
		// border-radius: 8px;
		background-color: #0066ff;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 14px;
	}

	::v-deep p {
		line-height: 28px;
		font-family: '微软雅黑';
		font-size: 16px;
		text-indent: 2rem;
		text-align: justify;
	}

	.bgImg {
		background: url("../../static/repeatBg_xb_20181026.png");
		width: 100%;
		height: 5px;
	}

	.tables {
		table {
			width: 100%;
			border-collapse: collapse;
			font-size: 14px;


			tr {
				width: 100%;

				&:nth-child(1) {
					th:nth-child(1) {
						width: 45%;
					}

					th:nth-child(2) {
						width: 25%;
					}
				}



				th {
					background-color: #8fb3e3;
				}

				.rjl {
					width: 23%;
				}

				td {
					text-align: center;
				}

				&:nth-child(2n) {
					td {
						height: 30px;
					}
				}
			}
		}
	}
</style>